<!DOCTYPE html>
<html class="loginHtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
	<style>
		.loginBody{
			background: url("/images/login_bg.jpg") no-repeat;
			height: 100%;
			width: 100%;
			overflow: hidden;
			background-size: 100%;
		}
	</style>
</head>
<body class="loginBody">
	<form class="layui-form">
		<div class="login_face"><img th:src="@{/images/login.jpg}" class="userAvatar"></div>
		<div class="layui-form-item input-item">
			<label for="username">用户名</label>
			<input type="text" placeholder="请输入用户名" autocomplete="off" id = "username" name="username" class="layui-input" lay-verify="required">
		</div>
		<div class="layui-form-item input-item">
			<label for="password">密码</label>
			<input type="password" placeholder="请输入密码" autocomplete="off" id = "password" name="password" class="layui-input" lay-verify="required">
		</div>
		<div class="layui-form-item input-item" id="imgCode">
			<label for="code">验证码</label>
			<input type="text" placeholder="请输入验证码" name="code" autocomplete="off" id="code" class="layui-input" lay-verify="required">
			<img th:src="@{/login/getCode}" onclick="this.src=this.src+'?'">
		</div>
		<div class="layui-form-item">
			<button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
		</div>
		<div class="layui-form-item layui-row">
			<a href="javascript:;" class="seraph icon-qq layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
			<a href="javascript:;" class="seraph icon-wechat layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
			<a href="javascript:;" class="seraph icon-sina layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
		</div>
	</form>
	<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
	<script type="text/javascript">
		layui.use(['form','layer','jquery'],function(){
			var form = layui.form,
					layer = parent.layer === undefined ? layui.layer : top.layer
			$ = layui.jquery;

			//登录按钮
			form.on("submit(login)",function(data){
				var btn =  $(this);
				//设置登录按钮  为不可点击
				btn.text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
				$.post("/login/login",data.field,function(rs){
					//设置登录按钮 恢复可点击   在前端防止 重复点击
					btn.text("登录").attr("disabled",false).removeClass("layui-disabled");
					layer.msg(rs.msg);
					if(rs.code != 200){
						layer.msg(rs.msg);
						$.get("/login/getCode",function (code) {
							$("#img").attr("src","/login/getCode");
						})
					}else{
						//跳转到templates/system/index/index.html页面
						layer.msg(rs.msg);
						location.href="/";
					}
				});
				return false;
			})

			//表单输入效果
			$(".loginBody .input-item").click(function(e){
				e.stopPropagation();
				$(this).addClass("layui-input-focus").find(".layui-input").focus();
			})
			$(".loginBody .layui-form-item .layui-input").focus(function(){
				$(this).parent().addClass("layui-input-focus");
			})
			$(".loginBody .layui-form-item .layui-input").blur(function(){
				$(this).parent().removeClass("layui-input-focus");
				if($(this).val() != ''){
					$(this).parent().addClass("layui-input-active");
				}else{
					$(this).parent().removeClass("layui-input-active");
				}
			})
		})

	</script>
</body>
</html>